<template>
  <el-table :data="tableData" :span-method="objectSpanMethod">
    <el-table-column v-for="(item, index) in tableColumns" :width="item.width" :key="index" :prop="item.prop" :label="item.label" :formatter="item.formatter" :show-overflow-tooltip="item.showToolTip"
      align="center">
      <template v-slot:header="{column}" v-if="showHeadToolTip">
        <el-tooltip :content="column.label">
          <span>{{column.label}}</span>
        </el-tooltip>
      </template>
      <!-- 1.某些列需要不同颜色显示 2.同时status具有多种状态，显示文本且需要不同颜色显示 -->
      <template v-slot="{row}" v-if="typeof item.highlight === 'function'">
        <div :class="`highlight-${item.highlight(row)}`">
          {{ item.formatter ? item.formatter(row) : row[item.prop]}}
        </div>
      </template>
    </el-table-column>
    <el-table-column label="操作" v-if="btnsInfo.length">
      <template v-slot="{row}">
        <template v-for="(btn, index) in btnsInfo">
          <!-- 自定义颜色, 隐藏, 禁用 -->
          <el-button :key="index" type="text" size="medium"
            :class="`btn-${ btn.color ? btn.color(row) : ''}`"
            v-if="typeof btn.hidden === 'function' ? btn.hidden(row) : true"
            :disabled="typeof btn.disabled === 'function' ? btn.disabled(row) : false" @click="clickEvent(btn.key, row)">
            {{typeof btn.name === 'function' ? btn.name(row) : btn.name}}
          </el-button>
        </template>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  name: 'my-table',
  props: {
    // table数据
    tableData: {
      ype: Array,
      required: true,
      default: () => []
    },
    // table列信息
    tableColumns: {
      type: Array,
      required: true,
      default: () => []
    },
    // 按钮数组
    btnsInfo: {
      type: Array,
      default: () => []
    },
    // 头部是否展示tooltip
    showHeadToolTip: {
      type: Boolean,
      default: false
    },
    // 合并单元格
    objectSpanMethod: {
      type: Function,
      default: null
    }
  },
  methods: {
    clickEvent (key, row) {
      const _key = typeof key === 'function' ? key(row) : key
      this.$emit('handleClick', _key, row)
    }
  }
}
</script>

<style scoped lang="less">
.highlight-green {
  color: green
}
.highlight-red {
  color: red;
}
.btn-green {
  color: green
}
.btn-red {
  color: red;
}
</style>
